<script setup>
import { ref, onMounted } from 'vue'
import { GetOrderAllDataAPI } from '@/apis/order';

const tableData = ref()
const getData = async () => {
  const result = await GetOrderAllDataAPI(1)
  console.log(result);
  tableData.value = result
}

const loading = ref(true)
onMounted(async() => {
  await getData()
  loading.value = false
})
</script>

<template>
          <el-table 
            :data="tableData" 
            height="500"
            v-loading="loading"
            element-loading-text="加载中..."
          >
            <el-table-column prop="id" label="订单号" width="80" />
            <el-table-column prop="shop" label="购买书名" width="80" />
            <el-table-column prop="createOrderTime" label="下单时间" width="120"  />
            <el-table-column prop="cancel" label="是否取消" width="90">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.cancel === 0">未取消</el-tag>
                <el-tag type="warning" v-else>已取消</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="cancelReason" label="取消原因" />

            <el-table-column prop="phone" label="支付状态" >
              <template #default="{row}">
                <el-tag type="primary" v-if="row.payStatus === 1">待支付</el-tag>
                <el-tag type="success" v-else>已支付</el-tag>
              </template>
            </el-table-column>  
            <el-table-column prop="payOrderTime" label="支付时间" width="120"  />
            <el-table-column prop="payMoney" label="支付金额" />
            <!-- <el-table-column prop="name" label="支付人" width="70" />
            <el-table-column prop="phone" label="联系方式" /> -->

          
          </el-table>
</template>